<!DOCTYPE html>
<html>
<head>
	<title>订单列表</title>
	<!--#include("../../common/common-link.html"){}-->
	<style type="text/css">
		.table-panel .conditions .col .input-group{width:320px;}
		.table-panel .conditions .col .scene-input-group{width:320px;}
		.table-panel .conditions .col .scene-input-group .addon{background-color: #eee;border-color: #ccc;color: #000;}
		.table-panel .conditions .col .scene-input-group .scene-input-group-btn{width:90px;}
		.table-panel .conditions .col .scene-input-group .scene-input-group-btn .scene{width:243px;color:#000 !important;background-color:#fff !important;border: 1px solid #ccc;}
		.table-panel .conditions .col .type-input-group{width:160px;}
		.table-panel .conditions .col .type-input-group .addon{background-color: #eee;border-color: #ccc;color: #000;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn{width:90px; width: 90px; background-color: #eee;border-color: #ccc;color: #000;}
		.table-panel .conditions .col .type-input-group .type-input-group-btn .status{width:120px;color: #000 !important;background-color: #fff !important;border: 1px solid #ccc;}
		.table-panel .conditions .col .status{width:103px;}
		.table-panel .conditions .col .ok-btn{width:90px;}
		.table-panel .table-content .operation .btn{width:89px;}
	</style>
</head>
<body>
	<div id="container-wrap" style="display:none;">
		<div class="table-panel">
			<div class="header">
				<h4 class="title">条件筛选</h4>
			</div>
			<div class="conditions">
                <div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">订单编号</span>
                        <input type="text" class="form-control" :value="form.sn" v-model="form.sn">
                    </div>
                </div>
                <div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">交易单号</span>
                        <input type="text" class="form-control" :value="form.transactionNo" v-model="form.transactionNo">
                    </div>
                </div>
                <div class="col">
                	<div class="input-group">
                        <span class="input-group-addon addon">聚合码昵称</span>
                        <input type="text" class="form-control" :value="form.codeAlias" v-model="form.codeAlias">
                    </div>
                </div></br>
                <div class="col">
                    <div class="input-group">
                        <span class="input-group-addon addon">归属子账户</span>
                        <input type="text" class="form-control" :value="form.subEmail" v-model="form.subEmail">
                    </div>
                </div>
                <div class="col" style="margin-right:0;">
					<div class="input-group time">
						<span class="input-group-addon">支付开始时间</span>
						<input type="text" id="begin_pay_time" class="form-control" readonly :value="form.beginPayTime" v-model="form.beginPayTime">
	  				</div>
				</div>
				<div class="col" style="margin-right:0;height:33px;line-height: 33px;">-</div>
				<div class="col">
					<div class="input-group time">
						<span class="input-group-addon">支付结束时间</span>
						<input type="text" id="end_pay_time" class="form-control" readonly :value="form.endPayTime" v-model="form.endPayTime">
	  				</div>
				</div><br>
				<div class="col">
                    <div class="input-group scene-input-group">
                        <span class="input-group-addon addon">支付场景</span>
                        <div class="input-group-btn scene-input-group-btn">
                            <button type="button" class="scene btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="type-txt">{{sceneTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="javascript:void(0)" @click="sceneSelect(-1)">全部</a></li>
                                <li><a href="javascript:void(0)" @click="sceneSelect(2)">用户主动扫主商户的聚合码</a></li>
                                <li><a href="javascript:void(0)" @click="sceneSelect(3)">主商户主动扫用户的支付码</a></li>
                                <li><a href="javascript:void(0)" @click="sceneSelect(5)">用户主动扫分店绑定的动态聚合码</a></li>
                                <li><a href="javascript:void(0)" @click="sceneSelect(6)">用户主动扫分店绑定的静态聚合码</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="input-group type-input-group">
                        <span class="input-group-addon addon">支付方式</span>
                        <div class="input-group-btn type-input-group-btn">
                            <button type="button" class="status btn btn-default dropdown-toggle" data-toggle="dropdown">
                                <span class="type-txt">{{channelTxt}}&nbsp;&nbsp;</span><span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu dropdown-menu-right">
                                <li><a href="javascript:void(0)" @click="channelSelect(-1)">全部</a></li>
                                <li><a href="javascript:void(0)" @click="channelSelect(1)">支付宝</a></li>
                                <li><a href="javascript:void(0)" @click="channelSelect(2)">微信</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
				<div class="col">
					<input class="btn button ok-btn" type="button" value="查&emsp;询" @click="query">
					<input class="btn button reset-btn" type="button" value="重&emsp;置" @click="reset">
				</div>
			</div>
			<div class="header">
				<h4 class="title">订单列表</h4>
				<div class="btns-group">
					<input type="button" class="btn btn-primary addBtn" @click="orderExport" value="订单导出"/>
				</div>
			</div>
			<div class="content">
				<table class="table-content">
					<tr>
						<th width="3%">序号</th>
						<th width="18%">订单号</th>
						<th width="20%">交易单号（微信支付宝）</th>
						<th width="15%">场景</th>
						<th width="10%">聚合码昵称</th>
						<th width="10%">归属子账户</th>
                        <th width="13%">支付时间</th>
						<th width="6%">支付方式</th>
						<th width="5%">订单金额</th>
					</tr>
					<template v-if="orders&&orders.length>0">
						<tr v-for="(order,index) in orders">
							<td>{{index+1}}</td>
							<td>{{order.sn}}</td>
							<td>{{order.transactionNo}}</td>
							<td>{{sceneMap[order.scene]}}</td>
							<td>{{order.codeAlias}}</td>
							<td>{{order.subAccountEmail}}</td>
                            <td>{{order.payTime}}</td>
							<td>{{payMap[order.payType]}}</td>
							<td>{{order.totalFee}}</td>
						</tr>
					</template>
					<template v-else>
						<tr>
							<td colspan="9">没有订单列表</td>
						</tr>
					</template>
				</table>
			</div>
			<div id="page"></div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var data = {};
	var vue = {};
	var form = {};
	vue.initialize = function() {
        form.sn="";
        form.codeAlias="";
        form.subEmail="";
		form.payType="";
		form.transactionNo="";
		data.channelTxt = "全部";
		data.sceneTxt = "全部";
		data.orders=[];
		data.form=form;
		initPayType();
		initSceneType();
		new Vue({
			el:"#container-wrap",
			data:data,
			methods:vue
		});
		request();
		Vue.nextTick(function() {
			bindEvent();
			$("#container-wrap").show();
		});
	};
	vue.query=function(){
		resetQuery();
		request();
	};
	vue.reset = function() {
		util.reset(form);
		data.channelTxt = "全部";
		data.sceneTxt = "全部";
	};
	vue.channelSelect = function(status) {
		if (status == '-1') {
			data.channelTxt = "全部";
			form.payType = "";
		} else if (status == '1') {
			data.channelTxt = "支付宝";
			form.payType = status;
		} else if (status == '2') {
			data.channelTxt = "微信";
			form.payType = status;
		}
	};
	vue.sceneSelect = function(status) {
		if (status == '-1') {
			data.sceneTxt = "全部";
			form.sceneType = "";
		} else{
			data.sceneTxt = data.sceneMap[status];
			form.sceneType = status;
		}
	};
	function resetQuery(){
		form.currentPageIndex=1;
	};
	function request() {
		var load_id = util.load();
		util.syncPost({
			url:"list",
			data:form,
			success : function(result) {
				$.extend(data, result);
				Vue.nextTick(function() {
					page();
				});
			},
			complete : function() {
				layer.close(load_id);
			}
		});
	};
	function bindEvent(){
		util.laydate({
			elem : '#begin_pay_time',
			type:"datetime",
			done: function(time, date, endDate){
				form.beginPayTime = time;
			  }
		});
		util.laydate({
			elem : '#end_pay_time',
			type:"datetime",
			done: function(time, date, endDate){
				form.endPayTime = time;
			  }
		});
		  
	};
	function orderExport(){
		util.confirm("确认导出？",function(){
			util.exportFile("export",form);
		});
	};
	function page() {
		util.laypage({
			elem : 'page',
			count : data.totalRecord,
			limit : form.pageSize,
			curr : form.currentPageIndex,
			jump : function(obj, first) {
				form.currentPageIndex = obj.curr;
				if (!first) {
					form.pageSize=obj.limit;
					request();
				}
			}
		});
	};
	function initPayType(){
		var map={};
		map["1"]="支付宝";
		map["2"]="微信";
		data.payMap=map;
	};
	function initSceneType(){
		var map={};
		map["2"]="用户主动扫主商户的聚合码";
		map["3"]="主商户主动扫用户的支付码";
		map["5"]="用户主动扫分店绑定的动态聚合码";
		map["6"]="用户主动扫分店绑定的静态聚合码";
		data.sceneMap=map;
	};
	function initialize(){
		layui.use(['laydate','laypage'], function(){
			laydate = layui.laydate;
			laypage = layui.laypage;
			vue.initialize();
		});
	};
</script>
</html>